import React, { Component } from 'react'
// 按需引入antdantd
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
// 引入css
import styles from 'pages/Login/Login.module.scss'
// 导入logo图
import logo from 'assets/logo.png'
// 导入login请求接口函数
import { loginApi } from 'api/login.js'
// 导入token设置
import { setToken } from 'utils/settingToken'

export default class Login extends Component {
    // 登录按钮点击
    loginFn = async (value) => {
        // console.log('登录阿牛', value);
        try {
            // 发起请求
            const res = await loginApi(value)
            // 存储token
            // localStorage.setItem('loginToken', res.data.token)
            setToken(res.data.token)
            // 提示用户
            message.success('登录成功', 1)
            // 跳转
            this.props.history.push('/')
            // console.log('login', res);
        } catch (error) {
            console.log(error);
            message.error(error.response.data.message, 1)
        }
    }

    render() {
        return (
            <div className={styles.login}>
                <Card className="login-container">
                    <img src={logo} alt="" className="login-logo" />
                    <Form size='large' initialValues={{ mobile: '13911111111', code: '246810', remember: true }} onFinish={this.loginFn}>
                        <Form.Item
                            name="mobile"
                            rules={[
                                { required: true, message: '手机号码不能为空！' },
                                { pattern: /^1[3-9][0-9]{9}$/, message: '手机号码格式不正确！' }
                            ]}
                        >
                            <Input placeholder='请输入手机号码' />
                        </Form.Item>

                        <Form.Item
                            name="code"
                            rules={[
                                { required: true, message: '验证码不能为空！' },
                                { pattern: /^[0-9]{6}$/, message: '验证码格式不正确！' }
                            ]}
                        >
                            <Input.Password placeholder='请输入验证码' />
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked"
                            rules={[
                                {
                                    validator: (_, value) =>
                                        // console.log(40, value)
                                        value ? Promise.resolve() : Promise.reject(new Error('请阅读相关资料'))
                                }
                            ]}>
                            <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div >
        )
    }
}
